<template>
  <div class="app-container ">
    <vxe-tabs v-model="tabVal" :options="tabList" class="tabs-container" height="100%">
      <template v-for="item in tabList" #[item.slots.default]>
        <components v-if="item.name == tabVal" :is="item.slots.default" class="p-5 h-full"></components>
      </template>
    </vxe-tabs>
  </div>
</template>

<script>
import UserList from './components/UserList.vue';
import RoleList from './components/RoleList.vue';

export default {
  components: { UserList, RoleList },
  data() {
    return {
      tabVal: 'UserList',
      tabList: [
        { name: 'UserList', title: '用户管理', slots: { default: 'UserList' } },
        { name: 'RoleList', title: '角色管理', slots: { default: 'RoleList' } },
      ],
    }
  },
  mounted() {
  },
  methods: {
  }
}
</script>
